<template>
  <el-empty class="empty-qvil" :description="description" :image="image" :image-size="imageSize">
    <template v-if="showButton">
      <el-button :type="buttonType" @click="$emit('button-click')">
        <el-icon v-if="buttonIcon">
          <component :is="buttonIcon" />
        </el-icon>
        {{ buttonText }}
      </el-button>
    </template>
  </el-empty>
</template>
<script setup lang="ts">
import type { EmptyOptions } from './types'

const props = withDefaults(defineProps<EmptyOptions>(), {
  image: '',
  description: '暂无数据',
  imageSize: 200,
  showButton: false,
  buttonText: '刷新',
  buttonType: 'primary',
  buttonIcon: '',
})

defineEmits<{
  (e: 'button-click'): void
}>()
</script>

<style scoped>
.empty-qvil {
  padding: 40px 0;
}
</style>
